<template>
	<div class="warehouse-logistics-screen-module5">
		<div class="bar-chart-view" ref="barchart"></div>
		<div class="pie-charts-view">
			<div class="chart-block" ref="charta"></div>
			<div class="chart-block" ref="chartb"></div>
			<div class="chart-block" ref="chartc"></div>
			<div class="chart-block" ref="chartd"></div>
		</div>
	</div>
</template>

<script setup>
import { ref, onBeforeUnmount, toRefs, getCurrentInstance, onMounted } from 'vue';
import * as echarts from 'echarts';

const instance = getCurrentInstance()

const props = defineProps({
	dataSource:{
		type:Object,
		default:function(){
			return {
				deliverySum:0,
				completed:0,
				unfinished:0,
				receiptSum:0,
				goodsReceived:0,
				unreceivedGoods:0,
				warehousingSum:0,
				warehousing:0,
				noWarehousing:0,
				issueSum:0,
				issue:0,
				notIssued:0
			}
		}
	}
})
const {dataSource} = toRefs(props)

let $frame = null;
let $dom = null;
let $domA = null;
let $domB = null;
let $domC = null;
let $domD = null;
let chartA = null;
let chartB = null;
let chartC = null;
let chartD = null;
let barchart = null;

const defaultOption = {
	tooltip: {
		trigger: 'item',
		formatter: "{a} <br/>{b}: {c} ({d}%)"
	},
	legend: {
		show: false
	},
	title:{
		text:"80.02%",
		left:"center",
		top:"46%",
		textStyle:{
			color:"#fff",
			fontSize:36,
			align:"center"
		}
	},
	graphic:{
		type:"text",
		left:"center",
		top:"35%",
		style:{
			text:"存货占比",
			textAlign:"center",
			fill:"#f2f2f2",
			fontSize:20
		}
	},
	series: [
		{
			name: '库存占比',
			type: 'pie',
			radius: ['70px', '80px'],
			avoidLabelOverlap: false,
			itemStyle: {
				borderRadius: 4,
				borderColor: '#fff',
				borderWidth: 2
			},
			label:{
				show:false
			},
			data: []
		}
	]
}
const barDefaultOption = {
  grid: {
		top:30,
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
	legend:{
		show:true,
		left:'right',
		textStyle:{
			color:'#fff'
		}
	},
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01],
		axisLine:{
			lineStyle:{
				color:'#fff'
			}
		}
  },
  yAxis: {
    type: 'category',
    data: ['送货', '收货', '入库', '出库'],
		axisLine:{
			lineStyle:{
				color:'#fff'
			}
		}
  },
  series: [
    {
      name: '总数',
      type: 'bar',
			label: {
				show: true,
				position: 'right',
				color:'#fff'
			},
      data: []
    },
    {
      name: '已完成',
      type: 'bar',
			label: {
				show: true,
				position: 'right',
				color:'#fff'
			},
      data: []
    },
		{
		  name: '未完成',
		  type: 'bar',
			label: {
				show: true,
				position: 'right',
				color:'#fff'
			},
		  data: []
		}
  ]
}

const createCharts = function(){
	if (!$dom) {
		$dom = instance.refs.barchart;
		barchart = echarts.init($dom)
	}
	if (!$domA) {
		$domA = instance.refs.charta;
		chartA = echarts.init($domA)
	}
	if (!$domB) {
		$domB = instance.refs.chartb;
		chartB = echarts.init($domB)
	}
	if (!$domC) {
		$domC = instance.refs.chartc;
		chartC = echarts.init($domC)
	}
	if (!$domD) {
		$domD = instance.refs.chartd;
		chartD = echarts.init($domD)
	}
}

const drawCharts = function(){
	destoryCharts()
	createCharts()
	let opt = JSON.parse(JSON.stringify(barDefaultOption))
	let arr1=[
		dataSource.value.deliverySum,
		dataSource.value.receiptSum,
		dataSource.value.warehousingSum,
		dataSource.value.issueSum
	],arr2=[
		dataSource.value.completed,
		dataSource.value.goodsReceived,
		dataSource.value.warehousing,
		dataSource.value.issue
	],arr3=[
		dataSource.value.unfinished,
		dataSource.value.unreceivedGoods,
		dataSource.value.noWarehousing,
		dataSource.value.notIssued
	];
	opt.series[0].data = arr1
	opt.series[1].data = arr2
	opt.series[2].data = arr3
	barchart.setOption(opt)
	
	opt = JSON.parse(JSON.stringify(defaultOption))
	opt.series[0].data = [
		{value:dataSource.value.completed,name:'已完成'},
		{value:dataSource.value.unfinished,name:'未完成'}
	];
	opt.graphic.style.text='送货完成比'
	opt.title.text = dataSource.value.deliverySum?(Number(((dataSource.value.completed/dataSource.value.deliverySum)*100).toFixed(2))+'%'):'0%';
	chartA.setOption(opt)
	
	opt = JSON.parse(JSON.stringify(defaultOption))
	opt.series[0].data = [
		{value:dataSource.value.goodsReceived,name:'已完成'},
		{value:dataSource.value.unreceivedGoods,name:'未完成'}
	];
	opt.graphic.style.text='收货完成比'
	opt.title.text = dataSource.value.receiptSum?(Number(((dataSource.value.goodsReceived/dataSource.value.receiptSum)*100).toFixed(2))+'%'):'0%';
	chartB.setOption(opt)
	
	opt = JSON.parse(JSON.stringify(defaultOption))
	opt.series[0].data = [
		{value:dataSource.value.warehousing,name:'已完成'},
		{value:dataSource.value.noWarehousing,name:'未完成'}
	];
	opt.graphic.style.text='入库完成比'
	opt.title.text = dataSource.value.warehousingSum?(Number(((dataSource.value.warehousing/dataSource.value.warehousingSum)*100).toFixed(2))+'%'):'0%';
	chartC.setOption(opt)
	
	opt = JSON.parse(JSON.stringify(defaultOption))
	opt.series[0].data = [
		{value:dataSource.value.issue,name:'已完成'},
		{value:dataSource.value.notIssued,name:'未完成'}
	];
	opt.graphic.style.text='出库完成比'
	opt.title.text = dataSource.value.issueSum?(Number(((dataSource.value.issue/dataSource.value.issueSum)*100).toFixed(2))+'%'):'0%';
	chartD.setOption(opt)
}

const destoryCharts = function(){
	destoryChart()
	destoryChartA()
	destoryChartB()
	destoryChartC()
	destoryChartD()
}

const destoryChart = function(){
	try{
		barchart.dispose();
		$dom.innerHTML = '';
		barchart = null;
		$dom = null;
	}catch(e){
		//TODO handle the exception
	}
}

const destoryChartA = function(){
	try{
		chartA.dispose();
		$domA.innerHTML = '';
		chartA = null;
		$domA = null;
	}catch(e){
		//TODO handle the exception
	}
}

const destoryChartB = function(){
	try{
		chartB.dispose();
		$domB.innerHTML = '';
		chartB = null;
		$domB = null;
	}catch(e){
		//TODO handle the exception
	}
}

const destoryChartC = function(){
	try{
		chartC.dispose();
		$domC.innerHTML = '';
		chartC = null;
		$domC = null;
	}catch(e){
		//TODO handle the exception
	}
}

const destoryChartD = function(){
	try{
		chartD.dispose();
		$domD.innerHTML = '';
		chartD = null;
		$domD = null;
	}catch(e){
		//TODO handle the exception
	}
}

onBeforeUnmount(()=>{
	destoryCharts()
})

defineExpose({drawCharts})
</script>

<style lang="scss" scoped>
.warehouse-logistics-screen-module5{
	height: 100%;
	display: flex;
	flex-direction: column;
	&>.bar-chart-view{
		flex-grow: 1;
		color:#fff;
	}
	&>.pie-charts-view{
		flex-shrink: 0;
		display: flex;
		flex-wrap: wrap;
		height: 400px;
		.chart-block{
			height: 200px;
			width: 200px;
		}
	}
}
</style>